<template>
    <div class="goodsinfo-container">
        <!-- 轮播图区域 -->
        <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
           <swiper :isfull="false"></swiper>
        </div>
      </div>
    </div>
 
        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">标题</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                    市场价：<del>￥1000</del>&nbsp;&nbsp;销售价：<span class="now_price">599</span>
                </p>
               <p>购买数量：
                <numbox></numbox>
                </p> 
                <p>
                    <mt-button type="primary" size="small">立即购买</mt-button>
                <mt-button type="danger" size="small">加入购物车</mt-button>
                </p>
					</div>
				</div>
			
			</div>
   
        <!-- 商品参数区域 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：SD380579571</p>
						<p>库存情况：60件</p>
						<p>上架时间：2019-01-01</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <p>
                    <mt-button type="primary" size="large" plain>图文介绍</mt-button>
                <mt-button type="danger" size="large" plain>商品评论</mt-button>
                </p>
                </div>
			</div>
  </div>
</template>

<script>
//导入轮播图组件
import swiper from "../subcomponents/swiper.vue"
import numbox from "../subcomponents/goodsinfo_numbox.vue"

export default {
    data(){
        return {

        }
    },
    components:{
        swiper,
        numbox
    }
}
</script>

<style lang="scss" scoped>
    .goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

    .now_price{
        font-weight: bold;
        color: red;
        font-size: 16px;
    }
    .mui-card-footer{
        display: block;
        button{
            margin:15px 0;
        }
    }
    

}
</style>